<template>
    <view>
        <view class="header" v-if="info">
            <image class="cover" :src="baseUrl+info.bgImg " mode="aspectFill"></image>
            <view class="float">
                <view class="name">{{ info.nickname }}</view>
                <view class="tag">{{ info.remark }}</view>
            </view>
        </view>
        <view class="nav-list">
            <view class="nav" :class="{current:current==i}" v-for="(nav,i) in navs" :key="i" @click="handleNavClick(nav,i)">
                <view class="text">{{ nav }}
                    <text v-if="i == 1">({{ commentNums["全部"] }})</text>
                </view>
                <view class="border"></view>
            </view>
        </view>

        <view :class="{'comment-wrapper':current == 1,list:current == 0}">

            <template v-if="current == 0">
                <view class="item" v-for="(item,i) in list" :key="i" @click="handleInfoClick(item)" v-if="">
                    <image class="cover" :src="item.cover"></image>
                    <view class="content">
                        <view class="name text-cut">{{ item.title }}</view>
                    </view>
                </view>
            </template>

            <template v-else>

                <view class="tags">
                    <view class="tag" v-for="(tag,i) in commentTags" :key="i" :class="{active:currentTag==i}"
                          @click="handleTagClick(tag,i)">
                        <text>{{ tag.title }}</text>
                        <text class="num">{{ commentNums[tag.title] }}</text>
                    </view>
                </view>

                <view class="item" v-for="(item,i) in list" :key="i">
                    <image class="left" :src="item.headimg"></image>

                    <view class="right">
                        <view class="top">
                            <view class="name text-cut">{{ item.nickname }}</view>
                            <view class="time">{{ item.createTime }}</view>
                        </view>
                        <view class="info">
                            <text class="label">综合评分</text>
                            <starts :value="item.staffScore" read-only/>
                        </view>
                        <view class="content">{{ item.comment }}</view>
                        <view class="grid col-4 grid-square flex-sub" v-if="item.images && item.images.length > 0">
                            <view class="image-wrapper" v-for="(image,j) in item.images" :key="j">
                                <image class="img" :src="image" @click="viewImage(image)"></image>
                            </view>
                        </view>

                    </view>

                </view>


            </template>


        </view>
        <list-loading v-if="loading"/>
        <list-empty v-if="!loading && (!list || list.length == 0)"/>
        <list-load-over v-else-if=" loadOver"/>
    </view>
</template>

<script>
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";
import Api from "@/utils/Api";
import {baseUrl} from "@/utils/request";
import Starts from "@/components/stars";

export default {
    name: "shop-technician-index",
    components: {Starts, ListLoadOver, ListEmpty, ListLoading},
    data() {
        return {
            baseUrl,
            id: null,
            info: null,
            navs: ["作品", "评价"],
            current: 0,
            list: [],
            page: 0,
            loading: false,
            loadOver: false,

            currentTag: 0,
            commentNum: {cp: 0, hp: 0, yt: 0, zp: 0,},
            commentTags: [
                {title: "全部", nums: ['cp', 'hp', 'zp']},
                {title: "满意", nums: ['hp'], params: {'evaluate': 3}},
                {title: "一般", nums: ['zp'], params: {'evaluate': 2}},
                {title: "不满意", nums: ['cp'], params: {'evaluate': 1}},
                {title: "有图", nums: ['yt'], params: {'is_image': 1}},
            ],
        }
    },
    computed: {
        commentImages() {
            let res = []
            if (this.currentTab == 0) return res;
            this.list.forEach(item => {
                //兼容一下，不然报错
                if (item.images) {
                    res.push(...item.images)
                } else if (item.cover) {
                    res.push(item.cover)
                }
            })
            return res;
        },
        commentNums() {
            let res = {};
            this.commentTags.forEach(tag => {
                let {title, nums} = tag;
                let num = 0;
                nums.forEach(n => {
                    num += this.commentNum[n];
                })
                res[title] = num;
            })
            return res;
        },
    },
    methods: {
        viewImage(image) {
            let arr = this.commentImages;
            console.log(arr, image, arr.indexOf(image))
            uni.previewImage({
                urls: this.commentImages,
                current: image
            })
        },
        handleNavClick(nav, i) {
            this.current = i;
            this.clear();
            this.getList();
            if (i == 1) {
                this.getCommentsNum();
            }
        },
        handleTagClick(tag, i) {
            this.currentTag = i;
            this.clear();
            this.getComments();
        },
        refresh() {
            this.clear();
            this.getList();
            this.getInfo();
        },
        clear() {
            this.page = 0;
            this.list = [];
            this.loadOver = false;
            this.loading = false;
        },
        getList() {
            if (this.loadOver) return;
            this.loading = true;
            if (this.current == 0) this.getWorkds()
            else this.getComments();
        },
        getWorkds() {
            Api.getTechnicianWorks(this.id, ++this.page).then(res => {
                this.list.push(...res)
                if (res.length < 10) this.loadOver = true;
            }).finally(() => this.loading = false)
        },
        getComments() {
            let data = {
                staff_id: this.id,
                page: ++this.page
            }
            Object.assign(data, this.commentTags[this.currentTag].params);

            Api.getShopComments(data).then(res => {
                this.list.push(...res)
                if (res.length < 10) this.loadOver = true;
            }).finally(() => this.loading = false)
        },
        getCommentsNum() {
            Api.getCommentNum(null, this.id).then(res => {
                this.commentNum = res;
            })
        },
        getInfo() {
            Api.getTechnicianInfo(this.id).then(res => {
                this.info = res;
            })
        },
        handleInfoClick(item) {
            uni.navigateTo({url: `/pages/shop/technician/info?id=${item.id}`})
        },
    },
    onLoad(options) {
        options = this.core.decodeURIComponentObject(options);
        this.id = options.id
        this.refresh();
        this.getCommentsNum();
    },
    onPullDownRefresh() {
        this.refresh();
    },
    onReachBottom() {
        this.getList();
    },
}
</script>

<style scoped lang='scss'>
.header {
    width: 100%;
    height: r(525px);
    position: relative;

    .cover {
        width: 100%;
        height: 100%;
    }

    .float {
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba(#393738, 0.7);
        color: white;
        width: 80%;
        height: r(159px);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        border-top-right-radius: r(60px);
        padding: r(40px);

        .name {
            font-size: r(34px);
        }

        .tag {
            font-size: r(20px);
            //background-color: #BF8F3A;
            //border-radius: r(8px);
            padding: r(5px 12px);
            margin-top: r(8px);
        }
    }
}

.nav-list {
    background-color: white;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;

    .nav {
        height: r(100px);
        padding: r(0 50px);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &.current {
            color: black;

            .border {
                background-color: $primary-color;
            }
        }

        .border {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            height: r(4px);
            width: r(30px);
        }
    }
}

.comment-wrapper {

    .tags {
        display: flex;
        flex-wrap: wrap;
        margin-top: r(20px);
        padding-left: r(20px);

        .tag {
            flex-shrink: unset;
            margin-right: r(20px);
            background-color: #c4c4c4;
            color: white;
            padding: r(8px 20px);
            border-radius: r(10px);

            &.active {
                background-color: $primary-color-light;
            }
        }
    }

    .label {
        font-size: r(28px);
        font-weight: 500;
        color: #000000;
    }


    .item {
        display: flex;
        background: white;
        margin: r(30px 30px 0 30px);
        padding: r(30px);
        border-radius: r(20px);


        .left {
            width: r(78px);
            height: r(78px);
            border-radius: 50%;
            margin-right: r(20px);
        }

        .right {
            flex: 1;
            width: calc(100% - #{r(98px)});

            .top {
                display: flex;
                align-items: center;

                .name {
                    flex: 1;
                    font-size: r(26px);
                    color: #000000;
                }

                .time {
                    flex-shrink: 0;
                    color: #999999;
                    font-size: r(24px);
                }
            }

            .info {
                display: flex;
                align-items: center;
                margin-top: r(14px);
                padding: 0;

                .label {
                    font-size: r(24px);
                    color: #666666;
                    margin-right: r(12px);
                }
            }

            .content {
                margin: r(20px 0);
                font-size: r(24px);
                color: #999999;
            }

            .img {
                height: 100%;
                width: 100%;
                position: absolute;

            }
        }

        .image-wrapper .img {
            border-radius: r(20px);
            border: 1px solid #f2f2f2;
        }
    }

}

.list {
    $gap: r(30px);
    padding: $gap 0 calc(#{$gap} + env(safe-area-inset-bottom)) $gap;
    display: flex;
    flex-wrap: wrap;

    .item {
        background-color: white;
        border-radius: r(10px);
        overflow: hidden;
        width: calc(50% - #{$gap});
        margin-right: $gap;
        margin-top: $gap;

        .cover {
            height: r(300px);
        }

        .content {
            padding: r(30px);
            display: flex;
            align-items: center;
        }

        .actions {

            .icon {
                margin-left: r(10px);
            }
        }

    }

}
</style>